import {CnBoldP, CnNormalP} from '@/components/text'
import useGlobalAPI from '@/hooks/useGlobalAPI'
import {DevNameItem, DevRuntimeItem, DevSystemMsgItem} from './components/infoItem'
import {selectDevInfoApi, editDevNameApi} from '@/api/public'

export default defineComponent({
  name: 'dataOverview',
  setup() {
    const {route} = useGlobalAPI()
    // 设备信息数据
    const devInfoData = ref({})

    // 设备信息
    const devInfo = reactive({
      /* 设备ID */
      devId: '',
      /* 设备名称 */
      devName: '',
      /* 设备型号 */
      devTypeName: '',
      /* 设备编码 */
      devGId: '',
      /* 系统信息 */
      systemInfo: '',
      /* 经度 */
      longitude: '',
      /* 纬度 */
      dimensionality: '',
      /* 创建时间 */
      CreateTime: '',
      /* 运行时长 */
      runningTime: '',
      /* 省市区 */
      province: '',
      city: '',
      district: '',
      /* 详细地址 */
      devAddress: '',
      /* 设备码 */
      devYard: ''
    })

    // 查询设备信息的函数
    const selectDevInfoFunc = async () => {
      const res = await selectDevInfoApi({devId: route.query.devId})
      devInfoData.value = res.data
      console.log(devInfoData.value)
      disposeDevInfoFunc()
    }

    // 将为null或者为''或者undefined的数据转换为 --
    const disposeNullValueFunc = (str: string) => {
      return str == '' || str == null || str == undefined ? '--' : str
    }

    // 处理设备信息数据的函数
    const disposeDevInfoFunc = async () => {
      console.log(route.query)
      devInfo.devId = route.query.devId
      devInfo.devName = route.query.devName
      devInfo.devGId = route.query.devGId
      devInfo.devAddress = devInfoData.value.devAddress
      devInfo.devYard = disposeNullValueFunc(devInfo.devYard)

      // 系统信息
      devInfo.systemInfo = disposeNullValueFunc(devInfoData.value.devBaseData.systemInfo)

      // 经度
      devInfo.longitude = disposeNullValueFunc(devInfoData.value.devBaseData.longitude)

      // 纬度
      devInfo.dimensionality = disposeNullValueFunc(devInfoData.value.devBaseData.latitude)

      // 设备型号
      devInfo.devTypeName = disposeNullValueFunc(devInfoData.value.devTypeName)

      // 省
      devInfo.province = disposeNullValueFunc(devInfoData.value.devBaseData.province)

      // 市
      devInfo.city = disposeNullValueFunc(devInfoData.value.devBaseData.city)

      // 区
      devInfo.district = disposeNullValueFunc(devInfoData.value.devBaseData.district)

      // 详细地址
      devInfo.devAddress = disposeNullValueFunc(devInfoData.value.devBaseData.devAddress)

      // 创建时间
      devInfo.CreateTime = disposeNullValueFunc(devInfoData.value.createTime)

      // 运行时长
      devInfo.runningTime = disposeNullValueFunc(devInfoData.value.devRunTotalTime)
    }

    onMounted(() => {
      selectDevInfoFunc()
      console.log(devInfo)
    })

    return () => (
      <div class='pb-24'>
        <CnBoldP class='mt-11 text-20'>设备信息</CnBoldP>
        <CnNormalP class='mt-6 mb-20 text-4xText'>查看您的设备信息</CnNormalP>
        <div class='grid grid-cols-1 gap-x-20 gap-y-20'>
          <DevNameItem devInfo={devInfo}></DevNameItem>
          <DevRuntimeItem devInfo={devInfo}></DevRuntimeItem>
          <DevSystemMsgItem
            devInfo={devInfo}
            selectDevInfoFunc={selectDevInfoFunc}
          ></DevSystemMsgItem>
        </div>
      </div>
    )
  }
})
